<template>
	<view class="group_4">
		<!-- 今日账单 -->
		<view class="monthBill" v-if="recentlyBill">
			  <image class="monthBill_bc_img" mode="scaleToFill" :src="monthBillBc" />
			  <view class="monthBill_con">
				<view class="monthBill_line">
				  <text>{{recentlyBill.expiretime}}待还</text>
				  <view  @tap="jump('/pages/order/bill/monthBill')">
					<text>账单明细</text>
					<text class="iconfont icon-fangxiangyou" style="font-size: 28rpx;color:#FFFFFF; margin-left:8rpx;"></text>
				  </view>
				</view>
				<view class="monthBill_con_bot">
				  <view class="monthBill_con_bot_L">
					<text class="monthBill_con_bot_L_num">{{(recentlyBill.price/100).toFixed(2)}}</text>
					<text class="monthBill_con_bot_L_unit">元</text>
				  </view>
				  <view class="monthBill_con_bot_R"  @tap="jump('/pages/order/bill/monthBill')">交租金</view>
				</view>
		  </view>
		  
		</view>
	</view>
	
</template>

<script>
export default {
	data(){
		return {
			monthBillBc: this.$IMAGE_URL + '/monthBill_bc_img.png',
		}
	},
	props: {
		recentlyBill: {},
	},
	created() {
		console.log('zhangdan',this.recentlyBill)
	},
	methods: {
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
	}
}
</script>

<style lang="scss" scoped>
	/* 账单 */
	.monthBill{
	  width: 718rpx;
	  border-radius: 8rpx;
	  background-color: #fff;
	  box-sizing: border-box;
	  position: relative;
	}
	
	.monthBill_bc_img{
	  width: 718rpx;
	  height: 178rpx;
	}
	
	.monthBill_con{
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  left: 0;
	  top: 0;
	}
	
	.monthBill_line{
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  padding: 24rpx 32rpx 0;
	  box-sizing: border-box;
	  font-size: 28rpx;
	  color: #FFFFFF;
	  line-height: 40rpx;
	}
	.group_4 {
	  padding: 0 24rpx 24rpx;
	}
	.monthBill_con_bot{
	  width: 100%;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  margin-top: 16rpx;
	  padding: 0 32rpx 0;
	  box-sizing: border-box;
	}
	.monthBill_con_bot_L_num{
	  font-size: 48rpx;
	  font-weight: bold;
	  color: #FFFFFF;
	  line-height: 66rpx;
	}
	.monthBill_con_bot_L_unit{
	  font-size: 28rpx;
	  color: #FFFFFF;
	  line-height: 40rpx;
	  margin-left: 8rpx;
	}
	.monthBill_con_bot_R{
	  width: 154rpx;
	  height: 58rpx;
	  background: #FFFFFF;
	  border-radius: 28rpx;
	  font-size: 30rpx;
	  font-weight: bold;
	  color: #1677FF;
	  line-height: 58rpx;
	  text-align: center;
	  letter-spacing: 2rpx;
	}
	

</style>